<template>
  <el-card class="box-card">
    <el-row>
      <el-col>
        <el-row class="searchRow">
          <!-- 搜索框 -->
          <el-input
            placeholder="请输入内容"
            v-model="query"
            clearable
            @clear="loadUserList()"
            class="inputSearch"
          >
            <el-button
              slot="append"
              @click="searchUser()"
              icon="el-icon-search"
            ></el-button>
          </el-input>
          <!-- 添加按钮 -->
          <el-button type="success" @click="showAddUserDia" plain
            >新增销售单</el-button
          >
        </el-row>
      </el-col>
    </el-row>
    <!-- 列表 -->
    <el-table :data="userlist" style="width: 100%">
      <el-table-column type="index" label="id" width="60"> </el-table-column>
      <el-table-column prop="carName" label="车辆品牌" width="150">
        <template slot-scope="scope">
          {{ scope.row.carName }}
        </template>
      </el-table-column>
      <el-table-column prop="SellerName" label="销售员">
        <template slot-scope="scope">
          {{ scope.row.SellerName }}
        </template>
      </el-table-column>
      <el-table-column prop="CustomerName" label="客户">
        <template slot-scope="scope">
          {{ scope.row.CustomerName }}
        </template>
      </el-table-column>
      <el-table-column prop="Num" label="数量">
        <template slot-scope="scope">
          {{ scope.row.Num }}
        </template>
      </el-table-column>
      <el-table-column prop="Amount" label="订单金额">
        <template slot-scope="scope">
          {{ scope.row.Amount }}
        </template>
      </el-table-column>
      <el-table-column label="创建日期">
        <!-- 如果单元格内显示的内容不是字符串(文本),需要给被显示的内容外层包裹一个template-->
        <!-- template内部要用数据 设置slot-scopre属性，该属性的值是用数据的create_time的数据源userlist -->
        <!-- slot-scope的值userlist其实就是el-table绑定的数据userlist userlist.row是数组中的每个对象 -->
        <template slot-scope="scope">
          {{ scope.row.CreateTime | fmtdate }}
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template slot-scope="scope">
          <el-button
            type="primary"
            plain
            size="mini"
            icon="el-icon-edit"
            @click="edit(scope.row)"
            circle
          ></el-button>
          <el-button
            type="success"
            plain
            size="mini"
            icon="el-icon-check"
            circle
          ></el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            icon="el-icon-delete"
            @click="del(scope.row)"
            circle
          ></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pagenum"
      :page-sizes="[2, 4, 6, 8,10]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- 对话框 新增 -->
    <el-dialog title="新增销售单" :visible.sync="dialogFormVisibleAdd">
      <el-form :model="form">
        <el-form-item label="销售员id" label-width="100px">
          <el-input v-model="form.sellerId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户id" label-width="100px">
          <el-input v-model="form.customerId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="100px">
          <el-input v-model="form.num" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="金额" label-width="100px">
          <el-input v-model="form.amount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
        <el-button type="primary" @click="addUser()">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 编辑对话框 修改-->
    <el-dialog title="修改销售单" :visible.sync="dialogFormVisibleEdit">
      <el-form :model="form">
        <el-form-item label="销售员id" label-width="100px">
          <el-input v-model="form.SellerId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="客户id" label-width="100px">
          <el-input v-model="form.CustomerId" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="数量" label-width="100px">
          <el-input v-model="form.Num" autocomplete="off"></el-input>
        </el-form-item>
          <el-form-item label="金额" label-width="100px">
          <el-input v-model="form.Amount" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
        <el-button type="primary" @click="editUser()">确 定</el-button>
      </div>
    </el-dialog>
  </el-card>
</template>
<script>
import { getAddSellssdata, getSellslistdata } from "../../network/sells";
import axios from "axios";
export default {
  name: "users",
  data() {
    return {
      query: "",
      userlist: [],
      total: 0,
      pagenum: 1,
      pagesize: 2,
      dialogFormVisibleAdd: false,
      dialogFormVisibleEdit: false,
      form: {
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    //列表
    async getUserList() {
      let query = this.query;
      let pagenum = this.pagenum;
      let pagesize = this.pagesize;
      const res = await getSellslistdata(query, pagenum, pagesize);
      console.log(res);
      this.status = res.meta.status;
      this.msg = res.meta.msg;
      this.users = res.data.users;
      this.total = res.data.total;
      if (this.status === 200) {
        this.userlist = this.users;
        this.total = this.total;
        this.$message.success(this.msg);
      } else {
        this.$message.warning(this.msg);
      }
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pagesize = val;
      // this.pagenum = 1
      this.getUserList();

      console.log(this.userlist.slice(0, val));
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pagenum = val;
      this.getUserList();
    },
    //搜索
    searchUser() {
      this.getUserList();
      console.log("aaaa");
    },
    //清空搜索框重新获取数据
    loadUserList() {
      this.getUserList();
    },
    //添加用户
    showAddUserDia() {
      this.dialogFormVisibleAdd = true;
      this.form = {};
    },
    //添加用户-发送请求
    async addUser() {
      this.dialogFormVisibleAdd = false;
      const res = await getAddUsersdata(this.form);
      console.log(res);
      this.status = res.meta.status;
      this.msg = res.meta.msg;
      if (this.status === 201) {
        this.$message.success(this.msg);
        this.getUserList();
        this.form = {};
      } else {
        this.$message.warning(this.msg);
      }
    },
    //编辑
    edit(row) {
      this.dialogFormVisibleEdit = true;
      this.$nextTick(() => {
        this.form = Object.assign({}, row);
      });
    },
    editUser() {
      //这里调接口就行了
    },
    //删除（加上接口就行了）
    del() {
      this.$confirm("此操作将永久删除该用户, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      });
    },
  },
};
</script>
<style scoped>
.box-card {
  height: 100%;
}
.inputSearch {
  width: 300px;
}
.searchRow {
  margin-top: 20px;
}
.pagination {
  margin-top: 20px;
}
</style>